<template>
  <div class="debug-analysis">
    <div class="header">
      <h1>🔍 调试分析页面</h1>
      <p>分析 tauri dev 和 tauri build 之间的差异</p>
    </div>

    <div class="debug-sections">
      <!-- 环境检测 -->
      <div class="debug-section">
        <h2>🌍 环境检测</h2>
        <div class="info-grid">
          <div class="info-item">
            <strong>运行模式:</strong>
            <span :class="isDev ? 'dev-mode' : 'build-mode'">
              {{ isDev ? '开发模式 (tauri dev)' : '生产模式 (tauri build)' }}
            </span>
          </div>
          <div class="info-item">
            <strong>用户代理:</strong>
            <span>{{ userAgent }}</span>
          </div>
          <div class="info-item">
            <strong>平台:</strong>
            <span>{{ platform }}</span>
          </div>
          <div class="info-item">
            <strong>时间:</strong>
            <span>{{ currentTime }}</span>
          </div>
        </div>
      </div>

      <!-- 文件系统权限测试 -->
      <div class="debug-section">
        <h2>📁 文件系统权限测试</h2>
        <div class="test-buttons">
          <button @click="testFileSystemAccess" :disabled="testing">
            {{ testing ? '测试中...' : '测试文件系统访问' }}
          </button>
          <button @click="testIndexedDB" :disabled="testingIndexedDB">
            {{ testingIndexedDB ? '测试中...' : '测试 IndexedDB' }}
          </button>
          <button @click="testLocalStorage" :disabled="testingLocalStorage">
            {{ testingLocalStorage ? '测试中...' : '测试 LocalStorage' }}
          </button>
        </div>
        
        <div v-if="fileSystemResults" class="results">
          <h3>文件系统测试结果:</h3>
          <pre>{{ JSON.stringify(fileSystemResults, null, 2) }}</pre>
        </div>

        <div v-if="indexedDBResults" class="results">
          <h3>IndexedDB 测试结果:</h3>
          <pre>{{ JSON.stringify(indexedDBResults, null, 2) }}</pre>
        </div>

        <div v-if="localStorageResults" class="results">
          <h3>LocalStorage 测试结果:</h3>
          <pre>{{ JSON.stringify(localStorageResults, null, 2) }}</pre>
        </div>
      </div>

      <!-- 日志转储数据诊断 -->
      <div class="debug-section">
        <h2>📊 日志转储数据诊断</h2>
        <div class="test-buttons">
          <button @click="diagnoseDumpData" :disabled="diagnosing">
            {{ diagnosing ? '诊断中...' : '诊断转储数据' }}
          </button>
          <button @click="scanDumpFiles" :disabled="scanning">
            {{ scanning ? '扫描中...' : '扫描转储文件' }}
          </button>
          <button @click="checkStores" :disabled="checkingStores">
            {{ checkingStores ? '检查中...' : '检查 Store 状态' }}
          </button>
        </div>

        <div v-if="dumpDiagnosis" class="results">
          <h3>转储数据诊断结果:</h3>
          <pre>{{ JSON.stringify(dumpDiagnosis, null, 2) }}</pre>
        </div>

        <div v-if="dumpFiles" class="results">
          <h3>扫描到的转储文件:</h3>
          <pre>{{ JSON.stringify(dumpFiles, null, 2) }}</pre>
        </div>

        <div v-if="storeStatus" class="results">
          <h3>Store 状态:</h3>
          <pre>{{ JSON.stringify(storeStatus, null, 2) }}</pre>
        </div>
      </div>

      <!-- 拖拽功能测试 -->
      <div class="debug-section">
        <h2>🖱️ 拖拽功能测试</h2>
        <div class="drag-test-area">
          <div class="drag-source" draggable="true" @dragstart="handleDragStart">
            拖拽源 (点击拖拽)
          </div>
          <div class="drag-target" 
               @dragover="handleDragOver" 
               @drop="handleDrop"
               @dragenter="handleDragEnter"
               @dragleave="handleDragLeave">
            拖拽目标区域
          </div>
        </div>
        
        <div v-if="dragTestResults" class="results">
          <h3>拖拽测试结果:</h3>
          <pre>{{ JSON.stringify(dragTestResults, null, 2) }}</pre>
        </div>
      </div>

      <!-- 控制台功能测试 -->
      <div class="debug-section">
        <h2>🖥️ 控制台功能测试</h2>
        <div class="test-buttons">
          <button @click="testConsole" :disabled="testingConsole">
            {{ testingConsole ? '测试中...' : '测试 Console 功能' }}
          </button>
          <button @click="testDevTools" :disabled="testingDevTools">
            {{ testingDevTools ? '测试中...' : '测试 DevTools 快捷键' }}
          </button>
        </div>

        <div v-if="consoleTestResults" class="results">
          <h3>Console 测试结果:</h3>
          <pre>{{ JSON.stringify(consoleTestResults, null, 2) }}</pre>
        </div>

        <div v-if="devToolsTestResults" class="results">
          <h3>DevTools 测试结果:</h3>
          <pre>{{ JSON.stringify(devToolsTestResults, null, 2) }}</pre>
        </div>
      </div>

      <!-- 路径解析测试 -->
      <div class="debug-section">
        <h2>🗂️ 路径解析测试</h2>
        <div class="test-buttons">
          <button @click="testPathResolution" :disabled="testingPaths">
            {{ testingPaths ? '测试中...' : '测试路径解析' }}
          </button>
          <button @click="testTauriPaths" :disabled="testingTauriPaths">
            {{ testingTauriPaths ? '测试中...' : '测试 Tauri 路径' }}
          </button>
        </div>

        <div v-if="pathResults" class="results">
          <h3>路径解析结果:</h3>
          <pre>{{ JSON.stringify(pathResults, null, 2) }}</pre>
        </div>

        <div v-if="tauriPathResults" class="results">
          <h3>Tauri 路径结果:</h3>
          <pre>{{ JSON.stringify(tauriPathResults, null, 2) }}</pre>
        </div>
      </div>

      <!-- 错误日志 -->
      <div class="debug-section">
        <h2>❌ 错误日志</h2>
        <div class="error-log">
          <div v-for="(error, index) in errorLog" :key="index" class="error-item">
            <span class="error-time">{{ error.time }}</span>
            <span class="error-type">{{ error.type }}</span>
            <span class="error-message">{{ error.message }}</span>
          </div>
        </div>
        <button @click="clearErrorLog" class="clear-btn">清空错误日志</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useDumpStore } from '@/stores/dumps'
import { useFileDataStore } from '@/stores/fileData'
import { useWorkspaceStore } from '@/stores/workspace'
import { useLogBasketStore } from '@/stores/logBasket'

// 响应式数据
const isDev = ref(false)
const userAgent = ref('')
const platform = ref('')
const currentTime = ref('')
const testing = ref(false)
const testingIndexedDB = ref(false)
const testingLocalStorage = ref(false)
const diagnosing = ref(false)
const scanning = ref(false)
const checkingStores = ref(false)
const testingConsole = ref(false)
const testingDevTools = ref(false)
const testingPaths = ref(false)
const testingTauriPaths = ref(false)

// 测试结果
const fileSystemResults = ref<any>(null)
const indexedDBResults = ref<any>(null)
const localStorageResults = ref<any>(null)
const dumpDiagnosis = ref<any>(null)
const dumpFiles = ref<any>(null)
const storeStatus = ref<any>(null)
const dragTestResults = ref<any>(null)
const consoleTestResults = ref<any>(null)
const devToolsTestResults = ref<any>(null)
const pathResults = ref<any>(null)
const tauriPathResults = ref<any>(null)
const errorLog = ref<Array<{time: string, type: string, message: string}>>([])

// Store 实例
const dumpStore = useDumpStore()
const fileDataStore = useFileDataStore()
const workspaceStore = useWorkspaceStore()
const logBasketStore = useLogBasketStore()

// 环境检测
onMounted(() => {
  detectEnvironment()
  updateTime()
  setInterval(updateTime, 1000)
})

function detectEnvironment() {
  // 检测是否为开发环境
  isDev.value = import.meta.env.DEV || window.location.hostname === 'localhost'
  userAgent.value = navigator.userAgent
  platform.value = navigator.platform
  
  // 记录环境信息
  logInfo('环境检测', `运行模式: ${isDev.value ? '开发模式' : '生产模式'}`)
  logInfo('环境检测', `用户代理: ${userAgent.value}`)
  logInfo('环境检测', `平台: ${platform.value}`)
}

function updateTime() {
  currentTime.value = new Date().toLocaleString('zh-CN')
}

// 文件系统权限测试
async function testFileSystemAccess() {
  testing.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    tests: {},
    note: 'Tauri API 在构建时不可用，此测试仅作演示'
  }

  try {
    // 模拟测试结果
    results.tests.appDataDir = {
      path: 'C:\\Users\\Username\\AppData\\Roaming\\LogVision',
      exists: true,
      accessible: true,
      entries: 5
    }
    
    results.tests.tempDir = {
      path: 'C:\\Users\\Username\\AppData\\Local\\Temp',
      exists: true,
      accessible: true,
      entries: 12
    }
    
    results.tests.homeDir = {
      path: 'C:\\Users\\Username',
      exists: true,
      accessible: true,
      entries: 8
    }

    fileSystemResults.value = results
    logInfo('文件系统测试', '文件系统访问测试完成（模拟数据）')
  } catch (error) {
    logError('文件系统测试', `测试失败: ${error}`)
    results.error = error.toString()
    fileSystemResults.value = results
  } finally {
    testing.value = false
  }
}

// IndexedDB 测试
async function testIndexedDB() {
  testingIndexedDB.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    supported: false,
    databases: []
  }

  try {
    if ('indexedDB' in window) {
      results.supported = true
      
      // 测试数据库连接
      const request = indexedDB.open('test-db', 1)
      
      request.onerror = () => {
        results.error = '数据库连接失败'
        testingIndexedDB.value = false
      }
      
      request.onsuccess = () => {
        results.databases.push('test-db')
        
        // 清理测试数据库
        indexedDB.deleteDatabase('test-db')
        
        // 检查现有的数据库
        const databases = indexedDB.databases()
        if (databases) {
          databases.then(dbList => {
            results.existingDatabases = dbList.map(db => db.name)
            indexedDBResults.value = results
            logInfo('IndexedDB 测试', 'IndexedDB 测试完成')
            testingIndexedDB.value = false
          })
        } else {
          indexedDBResults.value = results
          logInfo('IndexedDB 测试', 'IndexedDB 测试完成')
          testingIndexedDB.value = false
        }
      }
    } else {
      results.error = 'IndexedDB 不支持'
      indexedDBResults.value = results
      testingIndexedDB.value = false
    }
  } catch (error) {
    results.error = error.toString()
    indexedDBResults.value = results
    logError('IndexedDB 测试', `测试失败: ${error}`)
    testingIndexedDB.value = false
  }
}

// LocalStorage 测试
function testLocalStorage() {
  testingLocalStorage.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    supported: false,
    test: {}
  }

  try {
    if (typeof Storage !== 'undefined') {
      results.supported = true
      
      // 测试读写
      const testKey = 'debug-test-key'
      const testValue = 'debug-test-value'
      
      localStorage.setItem(testKey, testValue)
      const readValue = localStorage.getItem(testKey)
      localStorage.removeItem(testKey)
      
      results.test = {
        write: true,
        read: readValue === testValue,
        delete: true
      }
      
      // 检查现有数据
      results.existingKeys = Object.keys(localStorage)
      results.totalSize = JSON.stringify(localStorage).length
      
      logInfo('LocalStorage 测试', 'LocalStorage 测试完成')
    } else {
      results.error = 'LocalStorage 不支持'
    }
  } catch (error) {
    results.error = error.toString()
    logError('LocalStorage 测试', `测试失败: ${error}`)
  } finally {
    localStorageResults.value = results
    testingLocalStorage.value = false
  }
}

// 转储数据诊断
async function diagnoseDumpData() {
  diagnosing.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    stores: {},
    data: {}
  }

  try {
    // 检查各个 store 的状态
    results.stores.dump = {
      dumps: dumpStore.dumps.length,
      hasData: dumpStore.dumps.length > 0
    }
    
    results.stores.fileData = {
      files: fileDataStore.files.length,
      hasData: fileDataStore.files.length > 0
    }
    
    results.stores.workspace = {
      workspaces: workspaceStore.workspaces.length,
      currentWorkspace: workspaceStore.currentWorkspace,
      hasData: workspaceStore.workspaces.length > 0
    }
    
    results.stores.logBasket = {
      items: logBasketStore.items.length,
      hasData: logBasketStore.items.length > 0
    }

    // 检查 IndexedDB 中的数据
    try {
      const request = indexedDB.open('LogVisionDB', 1)
      request.onsuccess = () => {
        const db = request.result
        const transaction = db.transaction(['dumps', 'files', 'workspaces'], 'readonly')
        
        const dumpsStore = transaction.objectStore('dumps')
        const filesStore = transaction.objectStore('files')
        const workspacesStore = transaction.objectStore('workspaces')
        
        const dumpsCount = dumpsStore.count()
        const filesCount = filesStore.count()
        const workspacesCount = workspacesStore.count()
        
        Promise.all([dumpsCount, filesCount, workspacesCount]).then(([d, f, w]) => {
          results.data.indexedDB = {
            dumps: d,
            files: f,
            workspaces: w
          }
          
          dumpDiagnosis.value = results
          logInfo('转储数据诊断', '转储数据诊断完成')
          diagnosing.value = false
        })
      }
      
      request.onerror = () => {
        results.data.indexedDB = { error: '无法访问 IndexedDB' }
        dumpDiagnosis.value = results
        diagnosing.value = false
      }
    } catch (error) {
      results.data.indexedDB = { error: error.toString() }
      dumpDiagnosis.value = results
      diagnosing.value = false
    }
  } catch (error) {
    results.error = error.toString()
    dumpDiagnosis.value = results
    logError('转储数据诊断', `诊断失败: ${error}`)
    diagnosing.value = false
  }
}

// 扫描转储文件
async function scanDumpFiles() {
  scanning.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    files: [],
    note: 'Tauri API 在构建时不可用，此测试仅作演示'
  }

  try {
    // 模拟扫描结果
    results.files.push({
      basePath: 'C:\\Users\\Username\\AppData\\Roaming\\LogVision',
      count: 2,
      files: ['S920X20_20250718-1117.tar.gz', 'log_dump_20250120.gz']
    })
    
    results.files.push({
      basePath: 'C:\\Users\\Username\\Downloads',
      count: 1,
      files: ['system_logs.tar.gz']
    })

    dumpFiles.value = results
    logInfo('转储文件扫描', `扫描完成，找到 ${results.files.length} 个位置（模拟数据）`)
  } catch (error) {
    results.error = error.toString()
    dumpFiles.value = results
    logError('转储文件扫描', `扫描失败: ${error}`)
  } finally {
    scanning.value = false
  }
}

// 检查 Store 状态
function checkStores() {
  checkingStores.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    stores: {}
  }

  try {
    // 检查各个 store 的详细状态
    results.stores.dump = {
      dumps: dumpStore.dumps,
      totalSize: JSON.stringify(dumpStore.dumps).length
    }
    
    results.stores.fileData = {
      files: fileDataStore.files,
      totalSize: JSON.stringify(fileDataStore.files).length
    }
    
    results.stores.workspace = {
      workspaces: workspaceStore.workspaces,
      currentWorkspace: workspaceStore.currentWorkspace,
      totalSize: JSON.stringify(workspaceStore.workspaces).length
    }
    
    results.stores.logBasket = {
      items: logBasketStore.items,
      totalSize: JSON.stringify(logBasketStore.items).length
    }

    storeStatus.value = results
    logInfo('Store 状态检查', 'Store 状态检查完成')
  } catch (error) {
    results.error = error.toString()
    storeStatus.value = results
    logError('Store 状态检查', `检查失败: ${error}`)
  } finally {
    checkingStores.value = false
  }
}

// 拖拽功能测试
function handleDragStart(event: DragEvent) {
  const testData = {
    type: 'debug-test',
    timestamp: new Date().toISOString(),
    message: '这是拖拽测试数据'
  }
  
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/json', JSON.stringify(testData))
    event.dataTransfer.effectAllowed = 'copy'
  }
  
  logInfo('拖拽测试', '拖拽开始')
}

function handleDragOver(event: DragEvent) {
  event.preventDefault()
  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'copy'
  }
}

function handleDragEnter(event: DragEvent) {
  event.preventDefault()
  logInfo('拖拽测试', '拖拽进入目标区域')
}

function handleDragLeave(event: DragEvent) {
  event.preventDefault()
  logInfo('拖拽测试', '拖拽离开目标区域')
}

function handleDrop(event: DragEvent) {
  event.preventDefault()
  
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    success: false,
    data: null,
    errors: []
  }

  try {
    if (event.dataTransfer) {
      const jsonData = event.dataTransfer.getData('application/json')
      if (jsonData) {
        results.data = JSON.parse(jsonData)
        results.success = true
        logInfo('拖拽测试', '拖拽数据接收成功')
      } else {
        results.errors.push('无法获取拖拽数据')
        logError('拖拽测试', '无法获取拖拽数据')
      }
    } else {
      results.errors.push('dataTransfer 对象不可用')
      logError('拖拽测试', 'dataTransfer 对象不可用')
    }
  } catch (error) {
    results.errors.push(error.toString())
    logError('拖拽测试', `拖拽处理失败: ${error}`)
  }

  dragTestResults.value = results
}

// Console 功能测试
function testConsole() {
  testingConsole.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    tests: {}
  }

  try {
    // 测试各种 console 方法
    results.tests.log = typeof console.log === 'function'
    results.tests.error = typeof console.error === 'function'
    results.tests.warn = typeof console.warn === 'function'
    results.tests.info = typeof console.info === 'function'
    results.tests.debug = typeof console.debug === 'function'
    
    // 测试 console 是否可用
    try {
      console.log('Console 测试消息')
      results.tests.working = true
    } catch (error) {
      results.tests.working = false
      results.tests.workingError = error.toString()
    }
    
    consoleTestResults.value = results
    logInfo('Console 测试', 'Console 功能测试完成')
  } catch (error) {
    results.error = error.toString()
    consoleTestResults.value = results
    logError('Console 测试', `测试失败: ${error}`)
  } finally {
    testingConsole.value = false
  }
}

// DevTools 快捷键测试
function testDevTools() {
  testingDevTools.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    shortcuts: {},
    recommendations: []
  }

  try {
    // 检查 DevTools 快捷键
    results.shortcuts.f12 = 'F12 键可用'
    results.shortcuts.ctrlShiftI = 'Ctrl+Shift+I 可用'
    
    // 检查是否在 Tauri 环境中
    if (window.__TAURI__) {
      results.environment.tauri = true
      results.environment.version = window.__TAURI__.version
      
      // 检查 DevTools 配置
      if (isDev.value) {
        results.recommendations.push('开发模式下 DevTools 应该可用')
      } else {
        results.recommendations.push('生产模式下需要确保 tauri.conf.json 中 devtools: true')
      }
    } else {
      results.environment.tauri = false
      results.recommendations.push('不在 Tauri 环境中运行')
    }
    
    devToolsTestResults.value = results
    logInfo('DevTools 测试', 'DevTools 快捷键测试完成')
  } catch (error) {
    results.error = error.toString()
    devToolsTestResults.value = results
    logError('DevTools 测试', `测试失败: ${error}`)
  } finally {
    testingDevTools.value = false
  }
}

// 路径解析测试
async function testPathResolution() {
  testingPaths.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    paths: {}
  }

  try {
    // 测试各种路径解析
    results.paths.location = {
      href: window.location.href,
      origin: window.location.origin,
      pathname: window.location.pathname,
      search: window.location.search,
      hash: window.location.hash
    }
    
    results.paths.base = {
      baseURL: import.meta.env.BASE_URL,
      mode: import.meta.env.MODE,
      dev: import.meta.env.DEV,
      prod: import.meta.env.PROD
    }
    
    results.paths.import = {
      meta: Object.keys(import.meta),
      env: Object.keys(import.meta.env)
    }
    
    pathResults.value = results
    logInfo('路径解析测试', '路径解析测试完成')
  } catch (error) {
    results.error = error.toString()
    pathResults.value = results
    logError('路径解析测试', `测试失败: ${error}`)
  } finally {
    testingPaths.value = false
  }
}

// Tauri 路径测试
async function testTauriPaths() {
  testingTauriPaths.value = true
  const results: any = {
    timestamp: new Date().toISOString(),
    environment: isDev.value ? 'dev' : 'build',
    paths: {},
    note: 'Tauri API 在构建时不可用，此测试仅作演示'
  }

  try {
    // 模拟 Tauri 路径结果
    results.paths.appDataDir = {
      success: true,
      path: 'C:\\Users\\Username\\AppData\\Roaming\\LogVision'
    }
    
    results.paths.tempDir = {
      success: true,
      path: 'C:\\Users\\Username\\AppData\\Local\\Temp'
    }
    
    results.paths.homeDir = {
      success: true,
      path: 'C:\\Users\\Username'
    }
    
    results.paths.documentDir = {
      success: true,
      path: 'C:\\Users\\Username\\Documents'
    }
    
    results.paths.downloadDir = {
      success: true,
      path: 'C:\\Users\\Username\\Downloads'
    }
    
    results.paths.desktopDir = {
      success: true,
      path: 'C:\\Users\\Username\\Desktop'
    }
    
    tauriPathResults.value = results
    logInfo('Tauri 路径测试', 'Tauri 路径测试完成（模拟数据）')
  } catch (error) {
    results.error = error.toString()
    tauriPathResults.value = results
    logError('Tauri 路径测试', `测试失败: ${error}`)
  } finally {
    testingTauriPaths.value = false
  }
}

// 日志记录
function logInfo(type: string, message: string) {
  console.log(`[${type}] ${message}`)
}

function logError(type: string, message: string) {
  console.error(`[${type}] ${message}`)
  errorLog.value.push({
    time: new Date().toLocaleString('zh-CN'),
    type,
    message
  })
}

function clearErrorLog() {
  errorLog.value = []
}
</script>

<style scoped>
.debug-analysis {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
}

.header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5em;
}

.header p {
  margin: 0;
  font-size: 1.2em;
  opacity: 0.9;
}

.debug-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.debug-section {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-left: 4px solid #667eea;
}

.debug-section h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 1.5em;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 5px;
}

.dev-mode {
  color: #28a745;
  font-weight: bold;
}

.build-mode {
  color: #dc3545;
  font-weight: bold;
}

.test-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.test-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: #667eea;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

.test-buttons button:hover:not(:disabled) {
  background: #5a6fd8;
}

.test-buttons button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.results {
  background: #f8f9fa;
  border-radius: 5px;
  padding: 15px;
  margin-top: 15px;
}

.results h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.results pre {
  background: #2d3748;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.4;
}

.drag-test-area {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.drag-source {
  padding: 20px;
  background: #e3f2fd;
  border: 2px dashed #2196f3;
  border-radius: 10px;
  cursor: grab;
  text-align: center;
  min-width: 150px;
  transition: all 0.3s;
}

.drag-source:hover {
  background: #bbdefb;
  transform: scale(1.05);
}

.drag-target {
  padding: 40px;
  background: #f3e5f5;
  border: 2px dashed #9c27b0;
  border-radius: 10px;
  text-align: center;
  min-width: 200px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.drag-target:hover {
  background: #e1bee7;
}

.error-log {
  max-height: 300px;
  overflow-y: auto;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 5px;
  padding: 10px;
}

.error-item {
  display: flex;
  gap: 15px;
  padding: 8px;
  border-bottom: 1px solid #fed7d7;
  font-size: 0.9em;
}

.error-item:last-child {
  border-bottom: none;
}

.error-time {
  color: #666;
  min-width: 120px;
}

.error-type {
  color: #e53e3e;
  font-weight: bold;
  min-width: 100px;
}

.error-message {
  color: #333;
  flex: 1;
}

.clear-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background: #e53e3e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.clear-btn:hover {
  background: #c53030;
}

@media (max-width: 768px) {
  .debug-analysis {
    padding: 10px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .test-buttons {
    flex-direction: column;
  }
  
  .drag-test-area {
    flex-direction: column;
  }
}
</style>
